import React, { Component } from 'react';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as actionsCreators from "./action";

class Step2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      step2: 0
    }
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  
  handleSubmit(event, index) {
    event.preventDefault();
    let data = this.props.form;
    data.type = index;
    this.props.add(data);
  }

  componentDidMount() {
    let _this = this;
    setTimeout(function () {
      _this.setState({ step2: 1 });
    }, 10);
  }

  render() {
  let form=this.props.form;
  
    return (
      <div className="welcome-container">
        <span>
          <div className={`welcome-product-use-card-container ${this.state.step2 ? '__animated' : ''}`}>
            <div className="welcome-product-use-current-card-container">
              <div className="welcome-product-use-card-top" />
              <div className="welcome-product-use-card">
                <p style={{
                  margin: '15px 0 15px',
                  fontSize: '30px',
                  lineHeight: '40px',
                  fontWeight: 500
                }}>我们将为您推荐所需的项目，加入会员我们将系统化解决您的互联网需求.</p>
                <p style={{ fontSize: 20, marginBottom: 20 }}>数百万用户选择"多软"，来解决他们的互联网需求.</p>
                <p style={{ fontSize: 16, lineHeight: '20px' }}>通过加入多软的会员，我们有了新的互联网获客渠道和销售渠道，以及降低成本的硬件技术，我们的回报证明了他们的实力。</p>
                <p className="welcome-product-use-quote-author" style={{ marginTop: 30 }}>托马斯里克</p>
                <p className="welcome-product-use-quote-company">边缘</p>
                <img className="welcome-product-use-quote-image" src={require('./static/img/author.png')} />
                <div className="welcome-product-use-companies">
                  <p className="welcome-product-use-companies-body">许多大公司都在用，包括:</p>
                  <img className="welcome-product-use-companies-logo" src={require('./static/img/logo1.png')} />
                  <img className="welcome-product-use-companies-logo" src={require('./static/img/logo2.png')} />
                  <img className="welcome-product-use-companies-logo" src={require('./static/img/logo3.png')} />
                </div>
                <p className="welcome-product-use-pricing">
                  <span>想要更多很棒的特性? </span>
                  <a className="welcome-product-use-pricing-link" href="/pricing" target="_blank">查看我们的付费计划</a>
                </p>
              </div>
              <div className="welcome-product-use-card-bottom" />
            </div>
          </div>
        </span>
        <span>
          <div className={`welcome-form ${this.state.step2 ? '__animated' : ''}`}>
            <span>
              <div className="welcome-form-inner">
                <a className="icon-goback welcome-back-link" onClick={()=>{this.props.step(2,form)}} />
                <div className="welcome-form-progress">Step 3 of 4</div><h1 className="welcome-form-heading">
                  选择服务类型</h1>
                <div className="welcome-form-content">
                  <a className="welcome-list-box" onClick={(e) => { this.handleSubmit(e, 1) }}>
                    <img className="welcome-list-box-icon" src={require('./static/img/smb.svg')} />
                    <span className="welcome-list-box-caption">个体工商户</span></a>

                  <a className="welcome-list-box" onClick={(e) => { this.handleSubmit(e, 2) }}>
                    <img className="welcome-list-box-icon" src={require('./static/img/enterprise.svg')} />
                    <span className="welcome-list-box-caption">企业</span></a>

                  <a className="welcome-list-box" onClick={(e) => { this.handleSubmit(e, 3) }}>
                    <img className="welcome-list-box-icon" src={require('./static/img/media.svg')} />
                    <span className="welcome-list-box-caption">自媒体</span></a>

                  <a className="welcome-list-box" onClick={(e) => { this.handleSubmit(e, 4) }}>
                    <img className="welcome-list-box-icon" src={require('./static/img/director.svg')} />

                    <span className="welcome-list-box-caption">个人</span></a>

                  <a className="welcome-list-box" onClick={(e) => { this.handleSubmit(e, 5) }}>
                    <img className="welcome-list-box-icon" src={require('./static/img/school.svg')} />
                    <span className="welcome-list-box-caption">学校/大学</span></a>

                  <a className="welcome-list-box" onClick={(e) => { this.handleSubmit(e, 6) }}>
                    <img className="welcome-list-box-icon" src={require('./static/img/government.svg')} />
                    <span className="welcome-list-box-caption">政府/非政府组织</span></a>
                </div></div></span></div></span><span /></div>
    );
  }
}

export default connect(state => state, dispatch => bindActionCreators(actionsCreators, dispatch))(Step2);
